import React from 'react';
import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';
import { Menu } from 'antd'; // 导入Ant Design的Menu组件
import { VideoCameraOutlined, SettingOutlined, UserOutlined, EyeOutlined, TagsOutlined } from '@ant-design/icons'; // 导入需要的图标

const AdminDashboard = ({ user }) => {
  const navigate = useNavigate();
  const location = useLocation();
  
  return (
    <div className="admin-dashboard" style={{ minHeight: '100vh' }}>
      <div className="admin-header">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', height: '64px' }}>
          <div className="logo" style={{ display: 'flex', alignItems: 'center' }}>
            <VideoCameraOutlined style={{ fontSize: '24px', color: '#1890ff', marginRight: '12px' }} />
            <h1 className="admin-title" style={{ margin: 0, color: '#1890ff' }}>{import.meta.env.VITE_BACKEND_NAME}</h1>
          </div>
          
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Menu
              mode="horizontal"
              selectedKeys={[location.pathname]}
              style={{ borderBottom: 0, marginRight: '16px' }}
              items={[
                {
                  key: '/admin/videos',
                  icon: <VideoCameraOutlined />,
                  label: <Link to="/admin/videos">视频管理</Link>,
                },
                {
                  key: '/admin/cameras',
                  icon: <EyeOutlined />,
                  label: <Link to="/admin/cameras">相机管理</Link>,
                },
                {
                  key: '/admin/labels',
                  icon: <TagsOutlined />,
                  label: <Link to="/admin/labels">标签管理</Link>,
                },
                {
                  key: '/admin/configs',
                  icon: <SettingOutlined />,
                  label: <Link to="/admin/configs">配置管理</Link>,
                },
                {
                  key: '/admin/users',
                  icon: <UserOutlined />,
                  label: <Link to="/admin/users">用户管理</Link>,
                },
                /*
                {
                  key: '/admin/'
                },*/
              ]}
            />
            
            <button 
              onClick={() => navigate('/')}
              className="back-btn"
              title="返回视频监控中心"
            >
              <ArrowLeft size={20} />
              返回
            </button>
          </div>
        </div>
      </div>
      
      <div className="admin-content">
        <Outlet />
      </div>
    </div>
  );
};

export default AdminDashboard;